<!--订单表管理-->
<template>
  <div id="businessWorkOrder" class="app-container">
    <!--列表-->
    <div class="table-container flex-main">
      <el-table
        ref="multipleTable"
        :data="list"
        header-cell-class-name="table-header"
        fit
        height="100%"
        highlight-current-row
        @filter-change="handleFilterHandler"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        @sort-change="sortChange"
      >
        <el-table-column align="center" prop="id" label="#" width="60">
          <template slot-scope="scope">{{ scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column label="订单号/下单时间" prop="id" :show-overflow-tooltip="true" width="150">
          <template slot-scope="scope">
            <div>{{ scope.row.id }}</div>
            <div class="color-default">{{ scope.row.orderDate | formatDate('yyyy-MM-dd hh:mm:ss') }}</div>
          </template>
        </el-table-column>
        <el-table-column label="交易号/支付时间" prop="tradeNo" :show-overflow-tooltip="true" width="240">
          <template slot-scope="scope">
            <div>{{ scope.row.tradeNo }}</div>
            <div class="color-default">{{ scope.row.payTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</div>
          </template>
        </el-table-column>
        <el-table-column label="订单名称" prop="orderName" min-width="300" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-if="scope.row.orderStatus===2" class="color-primary common-cursor" @click="handleLook(scope.row)">{{ scope.row.orderName }}</span>
            <span v-else @click="handleLook(scope.row)">{{ scope.row.orderName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderType" sortable label="订单类型" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.orderType===0" class="color-success">充值订单</span>
            <span v-if="scope.row.orderType===1" class="color-primary">商品订单</span>
          </template>
        </el-table-column>
        <el-table-column
          column-key="orderStatus"
          :filters="[{value: 2,text: '已付款'}, { value: 0, text: '待付款' }, { value: 1, text: '付款失败' }, { value: 3, text: '已关闭' }]"
          :filter-multiple="false"
          label="状态"
          prop="orderStatus"
          width="90">
          <template slot-scope="scope">
            <span v-if="scope.row.orderStatus==2" class="color-primary">已付款</span>
            <span v-if="scope.row.orderStatus==0" class="color-warning">待付款</span>
            <span v-if="scope.row.orderStatus==1" class="color-danger">付款失败</span>
            <span v-if="scope.row.orderStatus==3" class="color-default">已关闭</span>
          </template>
        </el-table-column>
        <el-table-column prop="grandTotal" sortable label="金额" width="120">
          <template slot-scope="scope"><span class="color-primary">￥{{ scope.row.grandTotal }}</span></template>
        </el-table-column>
        <el-table-column prop="refundTotal" sortable label="退款" width="120">
          <template slot-scope="scope"><span class="color-danger">￥{{ scope.row.refundTotal }}</span></template>
        </el-table-column>
        <el-table-column prop="channelPayWay" label="支付渠道" width="150">
          <template slot-scope="scope">
            <div>{{ scope.row.channelPayWay }}</div>
            <div v-if="scope.row.tradeType" class="color-default">{{ scope.row.tradeType }}</div>
          </template>
        </el-table-column>
        <template v-if="listQuery.orderStatus==='3'">
          <el-table-column :key="Math.random()" label="关闭时间" prop="closedTime" :show-overflow-tooltip="true" width="150">
            <template slot-scope="scope">
              <div class="color-default">{{ scope.row.closedTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</div>
            </template>
          </el-table-column>
        </template>
        <el-table-column prop="userRealName" :show-overflow-tooltip="true" sortable label="姓名/电话" width="100">
          <template slot-scope="scope">
            <div>{{ scope.row.userRealName }}</div>
            <div class="color-default">{{ scope.row.userPhone }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination_handler">
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    memberId: {
      type: String,
      default: null
    }

  },
  data() {
    return {
      selectedOrg: {},
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        sort: '-orderDate'
      },

      multipleSelectionRecords: []
    }
  },
  watch: {
    memberId: {
      handler(val) {
        if (val) {
          this.listQuery = {
            ...this.listQuery,
            memberId: val
          }
          this.handleReset()
        }
      },
      immediate: true
    }
  },
  created() {
  },
  methods: {
    handleSelectedOrg(data) {
      this.selectedOrg = data
    },
    handleTabClick() {
      this.handleFilter()
    },
    handleLook(row) {
    },
    // 表格自带方法开始
    /* 全选/反选*/
    handleSelectionChange(val) {
      this.multipleSelectionRecords = val
    },
    /* 表格行数据单击*/
    handleRowClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    /**
     * 表格行过滤
     */
    handleFilterHandler(filters) {
      console.log(filters)
      if (filters.orderStatus) {
        this.listQuery.orderStatus = filters.orderStatus.join(',')
      }
      this.handleFilter()
    },
    /* 表格列排序*/
    sortChange(data) {
      const { prop, order } = data
      if (prop) {
        if (order === 'ascending') {
          this.listQuery.sort = '+' + prop
        } else {
          this.listQuery.sort = '-' + prop
        }
      } else {
        this.listQuery.sort = '-orderDate'
      }
      this.handleFilter()
    },
    // 表格自带方法结束
    /* 搜索*/
    handleFilter() {
      this.listQuery = {
        ...this.listQuery,
        page: 1
      }
      this.fetchData()
    },
    /* 重置*/
    handleReset() {
      this.listQuery = {
        ...this.listQuery,
        page: 1,
        limit: this.common.PAGE_LIMIT_DEFAULT,
        sort: '-orderDate'
      }
      this.fetchData()
    },

    async fetchData() {
      const response = await this.$store.dispatch('businessOrderHeaderPage', this.listQuery)
      this.list = response.records
      this.total = response.total
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

